<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./todoList.css" />
  </head>
  <body>
    <div id="app">
      <div class="header">
        <div class="container">
          <div class="logo">toDoList</div>
          <div class="input-area">
            <input type="text" v-model="content" @keyup.enter="onAdd"/> <button @click="onAdd">添加</button>
          </div>
        </div>
      </div>
      <div class="container">
        <h2><span>正在进行</span> <span class="mask-num">{{undoneList.length}}</span></h2>
        <ul class="mask-list">
          <!-- 1. v-for不要和v-if一起使用 -->
          <!-- 2. v-for 标签上一定要有 key， key值还要是唯一 -->
          <li v-for="todo in undoneList" :key="todo.content">
            <div><input type="checkbox" v-model="todo.done"/> <span>{{todo.content}}</span></div>
            <button @click="onDelete(todo.content)">删除</button>
          </li>
        </ul>
      </div>
      <div class="container">
        <h2><span>已经完成</span> <span class="mask-num">{{doneList.length}}</span></h2>
        <ul class="mask-list complete-list">
          <li v-for="todo in doneList" :key="todo.content">
            <div><input type="checkbox" v-model="todo.done"/> <span>{{todo.content}}</span></div>
            <button @click="onDelete(todo.content)">删除</button>
          </li>
        </ul>
      </div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
    <script>
      var todoList = [{content: '睡觉', done: true}, {content: '学习', done: false}];

      var vm = new Vue({
        el: "#app",
        data: {
          todoList, 
          content: ''
        },
        methods: {
          onAdd() {
            if(this.content === '') return
            this.todoList.unshift({content: this.content, done: false})
            this.content = ''
          },
          onDelete(content) {
            //  先根据传进来的content查找，找到在数组中的索引，splice删除
            const index = this.todoList.findIndex(todo => todo.content  === content)
            if(index === -1) return
            this.todoList.splice(index, 1)
          }
        },
        computed: {
          //  未完成列表
          undoneList() {
            return this.todoList.filter(todo => !todo.done)
          },
          doneList() {
            return this.todoList.filter(todo => todo.done)
          }
        }
      })
    </script>
  </body>
</html>